<template>
  <div class="homePage_main">
    <div class="header">
      <div class="message">
        <div class="main_admin">
          <a-avatar :size="80" src="src/image/admin.png" />
          <div class="admin_message">
            <span style="color: #ffcc33">你好啊！</span>
            <div style="font-size: 0.7em">
              <span>手机号为：{{ userMessage }} 的用户</span>
            </div>
          </div>
        </div>
        <div class="dataTime">
          今天是
          <span style="color: #ffcc33">{{ dataTime }}</span>
          ,希望您今天也过得愉快哦！
        </div>
      </div>
      <div class="main_time">
        <Time />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Time from "./model/time/time.vue";
import { UserOutlined } from "@ant-design/icons-vue";
import moment from "moment";
export default defineComponent({
  components: {
    Time,
    UserOutlined,
  },
  setup() {
    const userMessage = localStorage.getItem("userMessage");

    const dataTime = moment().format("YYYY-MM-DD");
    return {
      userMessage,
      dataTime,
    };
  },
});
</script>

<style lang="less" scoped>
.homePage_main {
  width: 100%;
  height: 100%;
  background: white;
  position: relative;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
		padding: 5em 10em;
		.message{
			padding: 20px;
			border: 1px solid #a3a2a2;
			border-radius: 40px;
		}
  }
  .main_admin {
    width: 30em;
    height: 6em;
    display: flex;
    align-items: center;
    .admin_message {
      width: auto;
      font-size: 2em;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 20px;
    }
  }
  .dataTime {
    font-size: 20px;
    color: #b1aeae;
  }
}
</style>
